import React, { memo } from "react";
import { NavLink } from "react-router-dom";
import { Input } from "antd";
import { SearchOutlined } from "@ant-design/icons";

import { headerLinks } from "@/common/local-data";

import { HeaderLeft, HeaderRight, HeaderWrapper } from "./style";

export default memo(function YYAppHeader() {
  const headerLink = (item, index) => {
    if (index < 3) {
      return (
        <NavLink exact to={item.path} key={item.title}>
          {item.title}
        </NavLink>
      );
    }
    return (
      <a href={item.path} key={item.title}>
        {item.title}
      </a>
    );
  };
  return (
    <HeaderWrapper>
      <div className="wrap-v1 content">
        <HeaderLeft>
          <a href="#/" className="logo sprite_01">
            网易云音乐
          </a>
          <div className="headerLinks">
            {headerLinks.map((item, index) => {
              return headerLink(item, index);
            })}
          </div>
        </HeaderLeft>
        <HeaderRight>
          <Input placeholder="音乐/视频/电台/用户" className="search" prefix={<SearchOutlined />} />
          <a className="center" href="https://music.163.com/#/login?targetUrl=%2Fcreatorcenter">
            创作者中心
          </a>
          <span className="login">登录</span>
        </HeaderRight>
      </div>
      <div className="divicer"></div>
    </HeaderWrapper>
  );
});
